<template>
  <nav>
    <!--首页tab滚动切换模块 可左右滑动切换-->
    <!--<div class=" cjy-scroll " style="overflow-x: scroll;height: 2.5rem ">-->
    <div style="height: 100%;position: relative;"
         ref="navhead"
         :style="{background:backGroundColor} ">

      <ul class="cjy-list" style="min-width: 100%">
        <!--滑动位置提示-->
        <li class="cjy-slder">
          <div style="position: absolute; bottom: 0;width: 100%; height: 1px;bottom:0; background: rgb(234, 234, 234)
; "></div>
          <div class="cjy-active-slider" ref="activeSlider" :style="{background: styleConfig.colorStyle}"></div>
        </li>
        <!--滑动位置提示end-->
        <!--每个分类选项按钮-->

        <!--:style="{color: activeList == index ?styleConfig.colorStyle:'' , width:width}"-->
        <li class="cjy-tab-item"
            v-for="(item, index) in titleInfor" :key="index"
            @click=" changeIndex(index)" ref="titleLi">
          <slot name="textBox" :isActive="activeList == index" :title="item.goodsClassName" >

          </slot>
        </li>
        <!--每个分类选项按钮end-->
      </ul>


    </div>


  </nav>
</template>

<script>
  import mixinAuto from './index.vue'

  export default {
    data () {
      return {}
    },
    mixins: [mixinAuto],
    components: {},
  }
</script>

<style scoped>
  .cjy-list {
    display: flex;
    position: absolute;
    height: 100%;
  }

  .cjy-slder {
    height: 100%;
    width: 0;
  }

  .cjy-active-slider {
    height: 100%;
    background: #0f8de0;
    position: absolute;
    bottom: 0;
    height: 2px;
    left: 0;
    z-index: 3;
    transition: 0.5s;
  }
</style>
